<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
var xhr;
var rs;

function init(){
	var btn = document.querySelector("#btnJB");
	rs = document.querySelector("#result");
	
	
	xhr = new XMLHttpRequest();
	xhr.onreadystatechange = jsonLoad;
	
	btn.onclick=function(){
		var fin = document.querySelector("#find").value;
		url = "../board/list_json.jsp?find=" + fin;
		
		xhr.open('get', url, true);
		xhr.send();

	};
}


function goPage(page){
	var f = document.getElementById('find').value;
	var url = '../board/list_json.jsp?find=' + f + "&nowPage=" + page;
	
	xhr.open('get', url, true);
	xhr.send();
}

function jsonLoad(){
	if(xhr.readyState == 4 && xhr.status == 200){
		var obj = xhr.responseText;
		var s = obj.indexOf("<body>")+6;
		var e = obj.lastIndexOf("</body>");
		var lastObj = obj.substring(s, e);
		
		eval(lastObj); // 배열을 선언한것과 똑같다.
		
		rs.innerHTML = "";	
		for(var i=0; i<jsonArray.length; i++){
					
			rs.innerHTML += "serial : " + jsonArray[i].serial + "<br/>";
			rs.innerHTML += "MID : " + jsonArray[i].mid + "<br/>";
			rs.innerHTML += "Subject : " + jsonArray[i].subject + "<br/>";
			rs.innerHTML += "Mdate : " + jsonArray[i].mdate + "<br/>";
			rs.innerHTML += "<hr/>";
		}
		if(Number(pageInfo.nowBlock) > 1){
			rs.innerHTML += "<input type='button' value='ss' onclick='goPage(1)'>";
			rs.innerHTML += "<input type='button' value='Prev' onclick='goPage(" + (Number(pageInfo.startPage) - 1 ) + ")'>";
		}
		for(i=Number(pageInfo.startPage); i <= Number(pageInfo.endPage); i++){
			rs.innerHTML += "<input type='button' value='" + i + "' onclick='goPage(" + i + ")'>";
		}
		
		if(Number(pageInfo.nowBlock) < Number(pageInfo.totBlock)){
			rs.innerHTML += "<input type='button' value='Next' onclick='goPage(" + (Number(pageInfo.endPage) + 1 ) + ")'>";
			rs.innerHTML += "<input type='button' value='End' onclick='goPage(" + pageInfo.totPage + ")'>";
		}

		
	}
}

</script>

</head>
<body>
<h1>JSON BOARD</h1>
<input type="text" id="find">
<input type="button" value="JSON BOARD List" id="btnJB">
<p/>
<div id="result"></div>

<script>init();</script>

</body>
</html>